웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
[jQuery] 제이쿼리를 이용해 요소를 상대 또는 절대좌표 서서히 이동, animate()
Last Modified : 2017-12-01 / Created : 2014-09-23제이쿼리(jQuery)를 이용해 원하는 엘리먼트를 간단하게 상대좌표 또는 절대좌표로 서서히 또는 빠르게 이동시킬 수 있습니다. 이 때 사용하는 메서드는 animate()입니다.
- 단순히 문서객체 또는 요소를 이동시키기 위해서라면 아래 방법들도 있습니다.
i. offset() 메소드
ii. CSS에서 top, left, right, bottom 속성을 사용하여 이동
하지만 위 방법들은 단순히 순간적으로 이동시키는 것뿐 서서히 또는 빠르게 이동시키는 효과를 주지는 않습니다. 이런 효과를 위해서 가장 간단히 할 수 있는 방법이 animate() 메소드인 것입니다.
(그림) 메인페이지의 이동하는 갤러리입니다. 우측으로 서서히 움직이는 효과는 animate() 메소드를 사용하였습니다.
animate() 메소드의 사용방법은 아래와 같습니다.
$('이동할 요소').animate({이동방향: "이동값"}, 이동속도, 이동효과);
animate()의 가장 큰 특징중 하나는 원하는 좌표 및 위치로 절대좌표 또는 상대좌표로 이동이 가능하다는 것입니다. 쉽게말해서...
i. 절대좌표 이동: 좌표값에 해당하는 위치로 이동
ii. 상대좌표 이동: 현재 위치를 기준으로 양(+) 도는 음(-)의 값만큼 상하좌우 이동
그리고, 맨 마지막 이동효과는 선택옵션으로 아래 두가지 중에서 선택이 가능합니다.
i. swing(기본값, default)
ii. linear
swing과 linear의 차이점은 linear의 경우 움직이는 동안 속도가 일정한 반면 swing은 끝부분의 경우 약간 늦게 이동합니다.
예제에 들어가기 앞서 옵션값에 따른 효과를 정리하였습니다.
test.animate({top: "30"}, 500);
// 절대좌표 top: 30px으로 이동, 예제 버튼 #1
test.animate({left: "30"}, 500);
// 절대위치 left: 30으로 이동, 예제 버튼 #2
test.animate({top: "+=30"}, 500);
// 현재 위치 기준 상단에서 하단으로 100 만큼 이동, 예제 버튼 #3
test.animate({left: "+=30"}, 500);
// 현재 위치 기준 좌측에서 우측으로 100 만큼 이동, 예제 버튼 #4
test.animate({left: "+=100"}, 5000);
// 위에 있는 5000은 밀리세컨(millisecond, 1000분의 1초)를 나타내는 값으로 이동 속도를 결정합니다. 즉, 이동하는데 5초가 걸리는 것을 의미합니다.
test.animate({left: "0%"}, 500);
test.animate({left: "100%"}, 500);
// 이동단위에 픽셀뿐만 아니라 %(퍼센트) 역시 사용 가능
test.animate({left: "+=100"}, 'slow');
test.animate({left: "+=100"}, 'fast');
// 위와 같이 숫자가 아닌 literal 표기도 가능합니다. 천천히 또는 빠르게 선택할 수 있음
그럼, 아래의 예제를 참고하세요.
# animate() 실전 예제 보기 아래는 예제입니다. 먼저 html 입니다.
<html>
<head>
<style type="text/css">
.testEle {
color:#fff;
text-align:center;
width: 80px;
height: 60px;
left: 50px;
top:50px;
display: inline-block;
background: #FF9148;
position: relative;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class='testEle'>Rankingis.com</div>
</body>
<script type="text/javascript">
$("#test1").click(function() { $(".testEle").animate({top:"30"}, 1000);
checkPosition();});
$("#test2").click(function() { $(".testEle").animate({left:"30"}, 1000);
checkPosition();});
$("#test3").click(function() { $(".testEle").animate({top:"+=30"}, 1000);
checkPosition();});
$("#test4").click(function() { $(".testEle").animate({left:"+=30"}, 1000);
checkPosition();});
function var checkPosition() {
setTimeout(function() {
$(".testEle").text("left:" + $(".testEle").css("left") + " top:" + $(".testEle").css("top"));
}, 1200);
};
checkPosition();
</script>
</html>
위 버튼들을 클릭해보세요!! 원하는 좌표로 부드럽게 이동시켜줍니다.
# animate()를 이용한 이동의 특징
- 단순히 문서객체 또는 요소를 이동시키기 위해서라면 아래 방법들도 있습니다.
i. offset() 메소드
ii. CSS에서 top, left, right, bottom 속성을 사용하여 이동
하지만 위 방법들은 단순히 순간적으로 이동시키는 것뿐 서서히 또는 빠르게 이동시키는 효과를 주지는 않습니다. 이런 효과를 위해서 가장 간단히 할 수 있는 방법이 animate() 메소드인 것입니다.
(그림) 메인페이지의 이동하는 갤러리입니다. 우측으로 서서히 움직이는 효과는 animate() 메소드를 사용하였습니다.
# animate() 사용방법
animate() 메소드의 사용방법은 아래와 같습니다.
$('이동할 요소').animate({이동방향: "이동값"}, 이동속도, 이동효과);
animate()의 가장 큰 특징중 하나는 원하는 좌표 및 위치로 절대좌표 또는 상대좌표로 이동이 가능하다는 것입니다. 쉽게말해서...
i. 절대좌표 이동: 좌표값에 해당하는 위치로 이동
ii. 상대좌표 이동: 현재 위치를 기준으로 양(+) 도는 음(-)의 값만큼 상하좌우 이동
그리고, 맨 마지막 이동효과는 선택옵션으로 아래 두가지 중에서 선택이 가능합니다.
i. swing(기본값, default)
ii. linear
swing과 linear의 차이점은 linear의 경우 움직이는 동안 속도가 일정한 반면 swing은 끝부분의 경우 약간 늦게 이동합니다.
예제에 들어가기 앞서 옵션값에 따른 효과를 정리하였습니다.
test.animate({top: "30"}, 500);
// 절대좌표 top: 30px으로 이동, 예제 버튼 #1
test.animate({left: "30"}, 500);
// 절대위치 left: 30으로 이동, 예제 버튼 #2
test.animate({top: "+=30"}, 500);
// 현재 위치 기준 상단에서 하단으로 100 만큼 이동, 예제 버튼 #3
test.animate({left: "+=30"}, 500);
// 현재 위치 기준 좌측에서 우측으로 100 만큼 이동, 예제 버튼 #4
test.animate({left: "+=100"}, 5000);
// 위에 있는 5000은 밀리세컨(millisecond, 1000분의 1초)를 나타내는 값으로 이동 속도를 결정합니다. 즉, 이동하는데 5초가 걸리는 것을 의미합니다.
test.animate({left: "0%"}, 500);
test.animate({left: "100%"}, 500);
// 이동단위에 픽셀뿐만 아니라 %(퍼센트) 역시 사용 가능
test.animate({left: "+=100"}, 'slow');
test.animate({left: "+=100"}, 'fast');
// 위와 같이 숫자가 아닌 literal 표기도 가능합니다. 천천히 또는 빠르게 선택할 수 있음
그럼, 아래의 예제를 참고하세요.
# animate() 실전 예제 보기 아래는 예제입니다. 먼저 html 입니다.
<html>
<head>
<style type="text/css">
.testEle {
}
</style>
</head>
<body>
</body>
<script type="text/javascript">
checkPosition();
</script>
</html>
left:80px top:40px
위 버튼들을 클릭해보세요!! 원하는 좌표로 부드럽게 이동시켜줍니다.
아래의 글도 찾고 계시지 않나요?
